<!--
 * @Author: liz
 * @Date: 2023-02-13 14:21:37
 * @LastEditTime: 2023-03-14 13:14:35
 * @LastEditors: kls
 * @Description: 
 * @FilePath: \jnks-shengpingtai\src\components\Header.vue
-->
<!-- 头部组件 -->
<template>
  <div class="header-box">
    <div class="box-info">
      <div class="left" v-if="ishow !== 'login'">
        <span class="left-span">{{ weatherInfo.temperature + "°C" }}</span>
        <p class="left-p">
          <span class="p-span">{{ "风向" }}</span>
          <span class="p-top">{{ weatherInfo.windDirection }}</span>
        </p>
        <p class="left-p">
          <span class="p-span">{{ "风速" }}</span>
          <span class="p-top">{{ weatherInfo.windPower + "级" }}</span>
        </p>
      </div>
      <div class="mid">
        <span class="mid-span"> 省级无人机公共安全监管平台 </span>
      </div>
      <div class="right" v-if="ishow !== 'login'">
        <p class="right-btn close" @click="close()" title="关闭"></p>
        <p class="right-btn full" @click="quan()" title="全屏"></p>
        <span class="right-span">{{ time }}</span>
        <span class="right-span">{{ date }}</span>
        <span class="content">
          <slot name="content" class="content"></slot>
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import dayjs from "dayjs";
import screenfull from "screenfull";
// import { publicLogOut } from "@/api/login";
export default {
  components: {},
  props: {
    ishow: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      userCity: "杭州",
      timer: null, // 时间 定时器
      time: null,
      date: null,
      weatherInfo: {
        weather: "", // 天气
        temperature: "", // 温度
        windDirection: "", // 风向
        windPower: "", // 风力
      },
    };
  },
  created() {},
  mounted() {
    this.initWeather("杭州市");
    this.updateTime();
  },
  beforeDestroy() {
    this.clearTimer();
  },
  methods: {
    /**
     * @description: 清除时间定时器
     */
    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer);
      }
    },
    /**
     * @description: 更新时间
     */
    updateTime() {
      this.clearTimer();
      this.timer = setInterval(() => {
        let time = new Date();
        this.date = dayjs(time).format("YYYY-MM-DD");
        this.time = dayjs(time).format("HH:mm:ss");
        if (
          this.time == "12:00:00" ||
          this.time == "8:00:00" ||
          this.time == "17:00:00"
        ) {
          console.log("更新天气");
          this.initWeather("杭州市");
        }
      }, 1000);
    },
    /**
     * @description: 获取天气信息
     * @param {*} name 查询天气的城市
     */
    initWeather(name = "杭州市") {
      AMap.plugin("AMap.Weather", () => {
        var weather = new AMap.Weather();
        //查询实时天气信息, 查询的城市到行政级别的城市，如朝阳区、杭州市
        weather.getLive(name, (err, data) => {
          if (!err) {
            this.weatherInfo = data;
          }
        });
      });
    },
    /**
     * @description: 全屏按钮
     */
    quan() {
      if (!screenfull.isEnabled) {
        this.$message({
          message: "您的浏览器不能全屏",
          type: "warning",
        });
        return false;
      }
      screenfull.toggle();
    },
    /**
     * @description: 退出登录
     */
    close() {
      //   publicLogOut()
      //     .then((res) => {
      //       this.$message({
      //         message: res.msg,
      //         type: "success",
      //       });
      //       localStorage.removeItem("Authorization");
      //       sessionStorage.removeItem("navigation");
      //       this.$router.push(`/login`);
      //     })
      //     .catch((err) => {});
    },
  },
};
</script>
<style lang="less" scoped>
.header-box {
  background: url("@/assets/imgs/back-heard.png") no-repeat;
  .box-info {
    width: 100%;
    height: 100%;
    position: relative;
    .mid {
      width: 40%;
      height: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: flex-end;
      flex-direction: row;
      flex-wrap: nowrap;
      .mid-span {
        font-size: 40px;
        font-family: myfont;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        text-shadow: 0px 4px 10px rgb(2, 197, 236),
          -4px -15px 43px rgb(1, 206, 247);
      }
    }
    .left {
      width: 20%;
      height: 100%;
      position: absolute;
      left: 0;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-evenly;
      .left-span {
        width: 20%;
        font-size: 14px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #79fffa;
        text-shadow: 0px 1px 4px #3bfff7;
      }
      .left-p {
        width: 20%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        // background: url("../assets/img/icon-header-left.png") no-repeat;
        background-position: bottom right;
        .p-top {
          font-size: 12px;
          color: #79fffa;
          text-shadow: 0px 1px 4px #3bfff7;
        }
        .p-span {
          margin-right: 15%;
          font-size: 14px;
          font-weight: 400;
          color: #cccccc;
          // opacity: 0.4;
        }
      }
    }
    .right {
      width: 20%;
      height: 100%;
      position: absolute;
      right: 30px;
      display: flex;
      flex-direction: row-reverse;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-start;
      .right-btn {
        width: 40px;
        height: 20px;
        cursor: pointer;
      }
      .close {
        width: 14px;
        height: 14px;
        background: url("@/assets/imgs/icon-loginout.png") no-repeat;
        background-size: 100% 100%;
        background-position: center;
        margin-left: 8%;
      }
      .full {
        width: 14px;
        height: 14px;
        background: url("@/assets/imgs/icon-fullscreen.png") no-repeat;
        background-size: 100% 100%;
        background-position: center;
      }
      .right-span {
        font-size: 14px;
        font-weight: 400;
        font-family: "DigifaceWide";
        color: #79fffa;
        text-shadow: 0px 1px 4px #3bfff7;
        padding-right: 5%;
      }
      .content {
        font-size: 14px;
        color: #ffffff;
        padding-right: 5%;
      }
    }
  }
}
</style>
